<template>
  <div class="gray-page">
    <nav-bar title="个人资料" theme="black"></nav-bar>
    <div class="my-personal-main page-main" style="margin-top: 44px">
      <van-cell-group :border="false">
        <van-cell
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
          size="large"
          title="姓名"
          :value="personalInfo.gridPersonName"
        />
        <van-cell
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
          size="large"
          title="性别"
          :value="personalInfo.sexName"
        />
        <van-cell
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
          size="large"
          title="手机号"
          :value="personalInfo.phone"
        />
        <van-cell
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
          size="large"
          title="出生日期"
          :value="personalInfo.birthday"
        />
      </van-cell-group>
      <van-cell-group :border="false">
        <van-cell
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
          size="large"
          title="类别"
          :value="personalInfo.gridPersonTypeName"
        />
        <van-cell
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black van-ellipsis"
          size="large"
          title="所属区域"
          :value="personalInfo.regionAddress"
        />
        <van-cell
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black van-ellipsis"
          size="large"
          title="网格名称"
          v-if="user.gridPersonType !== '5'"
          :value="personalInfo.gridName"
        />
      </van-cell-group>
      <van-cell-group :border="false">
        <van-cell title="密码修改" size="large" to="password" is-link />
      </van-cell-group>
      <van-cell-group :border="false" @click="toCode">
        <van-cell title="二维码" size="large" is-link />
      </van-cell-group>
      <van-cell size="large" title="退出登录" align="center" :border="false" @click="logoutHandler" />
    </div>
  </div>
</template>
<script>
import My from '@/api/my'
import Login from '@/api/login'
import { mapState } from 'vuex'
import mapPlugin from '@/libs/mapPlugin'
import Public from '@/api/public'
export default {
  data() {
    return {
      personalInfo: {}
    }
  },
  created() {
    this.getPersonalInfo()
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  methods: {
    getPersonalInfo() {
      My.Personal.detail().then(res => {
        if (res.data.status === 0 && res.data.data) {
          this.personalInfo = res.data.data
        }
      })
    },
    logoutHandler() {
      // 退出登录，记录用户当前位置
      this.sendLocation()
    },
    logout() {
      Login.Login.logout()
        .then(res => {
          // // 登出视频通话
          // this.$trtcCalling.logout()
          this.$store.commit('setUserInfo', {})
          this.$router.push('/login')
        })
        .catch(() => {
          // // 登出视频通话
          // this.$trtcCalling.logout()
          this.$store.commit('setUserInfo', {})
          this.$router.push('/login')
        })
    },
    toCode() {
      const personalInfo = JSON.stringify(this.personalInfo)
      this.$router.push({
        path: '/my/qrcode',
        query: {
          personalInfo: encodeURIComponent(personalInfo)
        }
      })
    },
    // 获取用户位置并发送
    // sendLocation() {
    //   mapPlugin.geolocation(result => {
    //     const lngLat = result.position
    //     Public.User.sendLocation({
    //       longitude: lngLat.lng,
    //       latitude: lngLat.lat
    //     })
    //   })
    // }
    // 获取用户位置并发送
    sendLocation() {
      if (this.user && this.user.appCode) {
        mapPlugin.geolocation(result => {
          const lngLat = result.position
          Public.User.positioningLocation({
            longitude: lngLat.lng,
            latitude: lngLat.lat,
            appCode: this.user.appCode,
            gridCode: this.user.gridCode,
            regionCode: this.user.regionCode,
            phone: this.user.phone,
            gridPersonType: this.user.gridPersonType,
            gridName: this.user.gridName,
            gridPersonCode: this.user.gridPersonCode,
            gridPersonName: this.user.gridPersonName
          }).then(res => {
            console.log(res)
            this.logout()
          })
        }, true)
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/my/personal.less';
</style>
